<!DOCTYPE HTML>
<html>
    
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="renderer" content="webkit" />
    <title></title>
    <link rel="stylesheet" href="https://www.layuicdn.com/layui/css/layui.css" />
    <script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
    <!-- <script src="https://cdn.bootcss.com/Sortable/1.10.1/Sortable.min.js"></script> -->
    <script src="Sortable.js"></script>
</head>
<style>
body {background:#f5f5f5;}
.layui-container {padding:50px;}
.layui-card-header {background:#c6ccd2;}
.layui-card:not(.filtered) .layui-card-header {cursor:move;}
.sortable-drag {border:1px dashed #888;}
.sortable-ghost {
 opacity: 0.3;border:1px dashed #888;
 }
</style>
    
<body>

    <div class="layui-container">
        <div class="layui-row layui-col-space20">
            <div class="layui-col-md9">
                <div id="layoutLeft">
                     <!-- 拖拽模块 -->
                </div>
            </div>
            <div class="layui-col-md3">
                <div id="layoutRight">
                    <!-- 拖拽模块 -->
                </div>
            </div>
        </div>
    </div>
</body>

<script>
$(function(){



    var layout1 = '<div class="layui-card" data-id="1"><div class="layui-card-header my-handle">Title-1</div><div class="layui-card-body">内容部分1</div></div>';
    var layout2 = '<div class="layui-card" data-id="2"><div class="layui-card-header my-handle">Title-2</div><div class="layui-card-body">内容部分2</div></div>';
    var layout3 = '<div class="layui-card" data-id="3"><div class="layui-card-header my-handle">Title-3</div><div class="layui-card-body">内容部分3</div></div>';
    var layout4 = '<div class="layui-card" data-id="4"><div class="layui-card-header my-handle">Title-4</div><div class="layui-card-body">内容部分4</div></div>';
    var layout5 = '<div class="layui-card" data-id="5"><div class="layui-card-header my-handle">Title-5</div><div class="layui-card-body">内容部分5</div></div>';

    var layoutArr = [
        {'layoutLeft':[2,1,3]},
        {'layoutRight':[4,5]},
    ]

    function init() {
        $('#layoutLeft').html('');
        $('#layoutRight').html('');
        layoutArr.map(function(item,index) {
            for(var i in item) {
                //console.log(item[i])
                item[i].map(function(a,b) {
                    $('#'+i).append(eval('layout'+a));
                })
            }
        })
    }
    //init();


    var sortable1 = new Sortable.create(layoutLeft, {
        group:{
            name:'layout',
            put:true,
        },
        animation: 150,
        filter: '.filtered',    // 禁止拖拽
        handle: ".my-handle",
        ghostClass: "sortable-ghost",  // drop placeholder的css类名
        chosenClass: "sortable-chosen",  // 被选中项的css 类名
        dragClass: "sortable-drag",  // 正在被拖拽中的css类名
        store: {
            get: function(sortable) {
                var order = localStorage.getItem('layoutLeft');
                //console.log(order.split('|'));
                //return order ? order.split('|') : [];
                order ? layoutArr[0]['layoutLeft'] = order.split('|') : '';
                //console.log(layoutArr)
                init();
            },
            set: function(sortable) {
                var order = sortable.toArray();
                localStorage.setItem('layoutLeft', order.join('|'));
                // console.log(order)
            }
        },
        // 元素被选中
        onChoose: function (evt) {
            evt.oldIndex;  // element index within parent
        },        
        // 元素从一个列表拖拽到另一个列表
        onEnd: function (/**Event*/evt) {


            //console.log('onEnd.#layoutLeft:', [evt.item, evt.from]); 
            var id_arr=''
            for(var i=0, len=evt.from.children.length; i<len; i++){
                id_arr+=','+ evt.from.children[i].getAttribute('data-id');
            }
            id_arr=id_arr.substr(1);
            //然后请求后台ajax 这样就完成了拖拽排序
            // console.log(id_arr);

            // 只剩下一个
            if(evt.from.children.length === 1) {
                evt.from.children[0].classList.add('filtered');
            }
        },
        onAdd: function(evt) {
            if(evt.to.children.length > 1) {
                for(var i=0, len=evt.to.children.length; i<len; i++){
                    evt.to.children[i].classList.remove('filtered');
                }
            }            
        }
    });

// console.log(sortable1.options.group.checkPut)

    var sortable2 = new Sortable.create(layoutRight, {
        group:'layout',
        animation: 150,
        filter: '.filtered',
        handle: ".my-handle",
        ghostClass: "sortable-ghost",  // drop placeholder的css类名
        chosenClass: "sortable-chosen",  // 被选中项的css 类名
        dragClass: "sortable-drag",  // 正在被拖拽中的css类名
        store: {
            get: function(sortable) {
                var order = localStorage.getItem('layoutRight');
                //console.log(order.split('|'));
                //return order ? order.split('|') : [];
                order ? layoutArr[1]['layoutRight'] = order.split('|') : '';
                //console.log(layoutArr)
                init();
            },
            set: function(sortable) {
                var order = sortable.toArray();
                localStorage.setItem('layoutRight', order.join('|'));
            }
        },
        onEnd: function (/**Event*/evt) {
            // 只剩下一个
            if(evt.from.children.length === 1) {
                evt.from.children[0].classList.add('filtered');
            }
            var id_arr=''
            for(var i=0, len=evt.from.children.length; i<len; i++){
                id_arr+=','+ evt.from.children[i].getAttribute('data-id');
            }
            id_arr=id_arr.substr(1);
            //然后请求后台ajax 这样就完成了拖拽排序
            //console.log(id_arr);
        },
        onAdd: function(evt) {
            if(evt.to.children.length > 1) {
                for(var i=0, len=evt.to.children.length; i<len; i++){
                    evt.to.children[i].classList.remove('filtered');
                }
            }
        }               
    });

});
</script>
</html>